<template>
  <div>
    <van-sticky>
      <div class="titles">服务日历</div>
    </van-sticky>
    <div class="father">
      <!-- 日历 -->
      <van-calendar
        title="添加购物车"
        :color="$store.state.primary_color_1"
        :poppable="false"
        :show-confirm="false"
        :style="{ height: '370px' }"
        v-model="show"
        @confirm="onConfirm"
      />
      <div class="bodys">
        <p v-if="date">{{ date }}</p>
        <p v-else>可选择日期查看当前服务订单</p>
      </div>

      <div class="meal">
        <h4>精选套餐</h4>
        <div class="centre">
          <div class="picture">
            <!-- 三张图片 -->
            <div class="picturer">
              <div class="pictures">
                <img :src="require(`@/assets/${banners[0]}`)" alt="" />
                <div>
                  <img :src="require(`@/assets/${banners[1]}`)" alt="" />
                  <img :src="require(`@/assets/${banners[2]}`)" alt="" />
                </div>
              </div>
            </div>
            <!-- 图片下面部分 -->
            <div class="price">
              <!-- 价格 -->
              <div class="prices">
                <h5>{{ meal.name }}</h5>
                <p>{{ meal.eazy }}</p>
                <b>{{ meal.price }}</b
                >&nbsp;<s>¥{{ meal.price * 1.5 }}</s>
              </div>
              <!-- 去购买 -->
              <div class="click">
                <van-button
                  :color="`linear-gradient(to right, ${$store.state.primary_color_1}, ${$store.state.primary_color_2})`"
                  class="bottom-button"
                  @click="$router.push(`/serve-shop/${as[i].id}`)"
                >
                  去购买</van-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div style="height: 500px;"></div> -->
    </div>
  </div>
</template>

<script>
import httpApi from "@/http";

export default {
  data() {
    return {
      calendar: "",
      date: "",
      show: false,
      meal: {},
      banners: [],
      as: [],
      num: "",
      i: "",
      params: {},
    };
  },
  // computed: {
  //   imgs(i) {
  //     return {
  //       ...this.banners[this.i],
  //       img: this.banners[this.i] && require(`@/assets/${this.banners[2]}`),
  //     };
  //   },
  // },
  mounted() {
    httpApi.serveApi.queryAll().then((res) => {
      //console.log(res);
      this.as = res.data.data[0];
      // console.log(this.as);
      this.num = res.data.data[1];
      // console.log(this.num);
      this.i = Math.floor(Math.random(this.num) * 10);
      console.log(this.i);
      this.params = { sid: this.as[this.i].id };
      console.log(this.params);
      //请求数据
      httpApi.serveApi.queryIdSmallClassList(this.params).then((res) => {
        console.log(res);
        this.meal = res.data.data[0];
        this.banners = res.data.data[0].banner.split(",");
        console.log(this.banners);
      });
    });

    // let params =
  },
  methods: {
    formatDate(date) {
      return `${date.getFullYear()}年${
        date.getMonth() + 1
      }月${date.getDate()}日`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
      console.log(this.date);
    },
  },
};
</script>

<style lang="scss" scoped>
.titles {
  width: 100%;
  background-color: white;
  text-align: center;
  height: 50px;
  line-height: 50px;
}

.father {
  background-color: #f7f7f7;
  ::v-deep .van-calendar__header-title {
    background-color: #fdd19f;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    height: 30px;
    line-height: 30px;
    color: white;
  }

  ::v-deep .van-calendar__header-subtitle {
    display: none;
  }
  .bodys {
    margin-top: 10px;
    width: 100vw;
    p {
      text-align: center;
      font-size: 14px;
      color: #666;
    }
  }
  .meal {
    padding: 0 10px;
    margin-bottom: 50px;

    h4 {
      margin: 20px 0 10px 0;
    }

    .centre {
      background-color: white;
      border-radius: 10px;
      margin-bottom: 10px;

      .picture {
        padding: 10px;

        .picturer {
          .pictures {
            display: flex;

            img {
              width: 220px;
              height: 130px;
              border-radius: 5px;
              background-size: cover;
              object-fit: cover;
            }

            div {
              flex: 1;
              padding-left: 5px;
              height: 130px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;

              img {
                height: 63px;
                width: 100%;
                background-size: cover;
              }
            }
          }
        }

        .price {
          display: flex;
          margin: 10px 0 0 0;

          .prices {
            h5 {
              color: black;
              font-weight: bold;
              font-size: 15px;
            }

            p {
              font-size: 12px;
              color: #666;
              padding: 3px 0;
            }

            b {
              color: #f03d37;
              padding-right: 2px;

              &::before {
                content: "¥";
                font-size: 10px;
                color: #f03d37;
                padding-right: 1px;
              }

              &::after {
                content: "起";
                font-size: 10px;
                color: #f03d37;
                padding-left: 1.5px;
              }
            }

            s {
              font-size: 11px;
              color: #666;
            }
          }

          .click {
            flex: 1;
            position: relative;

            .bottom-button {
              color: white;
              width: 70px;
              height: 30px;
              border-radius: 50px;
              font-size: 13px;
              border: none;
              position: absolute;
              right: 0;
              bottom: 0;
            }
          }
        }
      }
    }
  }

  .van-calendar {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
}
</style>
